<template>
  <div style="width:100%;height:100%;display: flex">
   <div class="left">
     <div class="back" @click="back()">
       <div>
       <el-icon style="font-size: 22px; vertical-align: middle;margin-bottom:3px;"><Back /></el-icon>
       &nbsp;
       <div style="display: inline-block;">返回新闻列表</div>
       </div>
     </div>

     <div style="margin-top: 30px;margin-left: 12%;">
       <el-icon style="font-size: 22px; vertical-align: middle;margin-bottom:3px;"><UserFilled /></el-icon>
           &nbsp;
       <div style="display: inline-block;">
         <router-link to="/user-center/user-info" style="text-decoration: none;color:black;" >个人信息</router-link>
       </div>
     </div>

       <div style="margin-top: 30px;margin-left: 12%;">
         <el-icon style="font-size: 22px; vertical-align: middle;margin-bottom:3px;"><Edit /></el-icon>
         &nbsp;
         <div style="display: inline-block;">
           <router-link to="/user-center/manage-news" style="text-decoration: none;color:black;" >管理新闻</router-link>
         </div>
       </div>

     <div style="margin-top: 30px;margin-left: 12%;">
       <el-icon style="font-size: 22px; vertical-align: middle;margin-bottom:3px;"><Tickets /></el-icon>
       &nbsp;
       <div style="display: inline-block;">
         <router-link to="/user-center/publish-new" style="text-decoration: none;color:black;" >发布新闻</router-link>
       </div>
     </div>


   </div>

    <div class="right">
      <router-view></router-view>
    </div>


    <div class="Group993" style="width: 212px; height: 32px; left: 53px; top: 41px; position: absolute">
      <div class="Newsletter"
           style="left: 0px; top: 2px; position: absolute; text-align: center; color: #119C59; font-size: 25px; font-family: Montserrat; font-weight: 700; text-transform: uppercase; letter-spacing: 0.20px; word-wrap: break-word">
        Newsletter</div>
      <div class="App"
           style="left: 183px; top: 0px; position: absolute; text-align: center; color: #333333; font-size: 14px; font-family: Montserrat; font-weight: 700; letter-spacing: 0.20px; word-wrap: break-word">
        App</div>
    </div>

  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import { useRouter,useRoute } from 'vue-router'
import userInfo from '@/views/userCenter/userInfo/index.vue'
// 使用useRoute方法获取路由信息
const route = useRoute()
const router = useRouter()

const back = () => {
  router.push({path:'/home'})
}
</script>

<style scoped>
.left {
  width:30%;
  /*height:100%;*/
  background-color: #F4F3F1;

}
.right {
  background: #FAF9F7;
  width:70%;
  /*height:100%;*/
  padding-left: 8%;
  display: flex;
}
.back {
  font-size: 16px;
  margin-top: 30%;
  margin-left: 12%;
}
.column1 {
  display: inline-block;
  /*border:1px dashed black;*/
  width:48%;
  height:100%;
  margin-right: 5%;
}
.column2 {
  display: inline-block;
  /*border:1px dashed black;*/
  width:34%;
  height:100%;

}
.title {
   margin-top: 34%;
   font-size: 52px;
   font-weight: 300;
   padding-bottom: 5px;
   border-bottom:3px solid #14B86E;
   margin-bottom: 10%;
}
.input {
  border:0;
  background-color: #FAF9F7;
  border-bottom:3px solid #888888;
  width:calc(100% - 20px);
  height:50px;
  margin-top: 12%;
  font-size: 18px;
  color:#52575C;
  padding-left: 20px;
}
.input:focus {
  outline: none;
}
.input::-webkit-input-placeholder {
  text-indent: 30px;
}
.input:focus::placeholder {
  transform: scale(0.8) translateY(-100%);
  text-indent: 0px;
}
.input:focus {
  border-bottom:3px solid #14B86E;
}
.avatar {
  width:150px;
  height:150px;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  margin-top: 90%;
}
</style>
